<template>
    <div id="goodslist">
        <div class="breadcrumb ">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>
                <el-tag>蔬菜管理</el-tag>
            </el-breadcrumb-item>
             <el-breadcrumb-item>
                <el-tag>蔬菜列表</el-tag>
              </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="table">
             <el-table
                :data="tableData.filter(data => !search || data.vname.toLowerCase().includes(search.toLowerCase()))"
                borde
                style="width: 100%"
                height="550">
                <el-table-column
                  label="蔬菜id"
                  prop="vid"
                  width='150'>
                </el-table-column>

                <el-table-column
                  label="蔬菜名"
                  prop="vname">
                </el-table-column>

                <el-table-column
                  label="价格/斤"
                  prop="price">
                </el-table-column>

                <el-table-column
                  label="品种类型"
                  prop="pzleixing">
                </el-table-column>
                <el-table-column
                  label="销售类型"
                  prop="xlleixing">
                </el-table-column>

                <el-table-column
                  label="供应商"
                  prop="gname">
                </el-table-column>

                <el-table-column
                  align="right">
                  <template slot="header" slot-scope="scope">
                    <el-input
                      v-model="search"
                      size="mini"
                      placeholder="输入关键字搜索"/>
                  </template>
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.row.vid)">Edit</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.row.vid)">Delete</el-button>
                  </template>
                </el-table-column>

              </el-table>
        </div>
    </div> 
</template>
<script>
    import { getVegetables,delVegetables} from './../../../service/api/index.js'
     export default{
       name:"GoodsList",
            data() {
              return {
                  tableData: [],
                     search: ''
              }
            },
            
           
            
          
   
            mounted(){
               
            },
            


            created(){

                 //请求网络数据   调用getVegetables返回promise对象，然后可以调用promise的then方法，返回请求到的数据(response.data)  
                      getVegetables().then((response)=>{
                      console.log(response);
                      if (response.success) {
                         this.tableData = response.data;
                        // console.log(this.tableData);
                      //   console.log((this.tableData).length);
                         for(var i=0;i<(this.tableData).length;i++){
                             // console.log(this.tableData[i].pzleixing);
                               if (this.tableData[i].pzleixing===1) {
                                  this.tableData[i].pzleixing="蔬菜水果";
                               }else if(this.tableData[i].pzleixing===2){
                                  this.tableData[i].pzleixing="禽蛋肉类(鲜活)";
                               }else if (this.tableData[i].pzleixing===3){
                                  this.tableData[i].pzleixing="熟食豆类";                              
                               }else if (this.tableData[i].pzleixing===4) {
                                  this.tableData[i].pzleixing="米面粮油";   
                               };
                               if (this.tableData[i].xlleixing===1) {
                                   this.tableData[i].xlleixing="热销"; 
                               }else if (this.tableData[i].xlleixing===2) {
                                 this.tableData[i].xlleixing="新品"; 
                               }else if (this.tableData[i].xlleixing=3) {
                                  this.tableData[i].xlleixing="打折"; 
                               }
                         }
                       }
                 }).catch(error=>{
                       // todo......
                      console.log(error);
                 })   //---catch
            }, // ----created





            methods:{
                 async handleEdit(vid){
                     this.$router.push({name:'editGoods',params:{vid:vid}});
                  },

                async handleDelete(vid){
                     let res = await delVegetables(vid);
                     console.log(res);
                     if (res.status===200) {
                          this.$message({
                              message: '删除蔬菜商品成功',
                              type: 'success'
                            });
                          window.location.reload();
                     }
                }
            }
     }
    
</script>
<style lang="less" scope>
   #goodslist{
     width:100%;
     height:100%;
     background-color:#f5f5f5;
   }
   .breadcrumb {
     margin-right: 0.2rem;
     margin-left: 0.2rem;
     margin-top: 0.1rem;
     margin-bottom: 0.1rem;
     background-color:white;
     padding: 0.06rem;
     height:0.6rem;
     border-radius: 4px
   }
   .table{
     margin-left: 0.2rem;
     margin-right: 0.2rem;
   }
</style>